<%--
  Created by IntelliJ IDEA.
  User: Heat
  Date: 2019/11/6
  Time: 19:08
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
    <title>$Title$</title>
    <script src="js/jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/jsrender.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/jsrender.min.js" type="text/javascript" charset="utf-8"></script>
  </head>
  <body>
  <div>
    <table width="800" border="1">
      <thead>
      <tr>
        <th width="10%">序号</th>
        <th width="30%">姓名</th>
        <th width="80%">家庭成员</th>
      </tr>
      </thead>
      <tbody id="list">

      </tbody>
    </table>
  </div>
  </body>
</html>
<script id="testTmpl" type="text/x-jsrender">
<tr>
    <td>{{:#index + 1}}</td>
    <td>{{:name}}</td>
    <td>
      {{for family}}
　　　　　　{{:#data}}
      {{/for}}
    </td>
</tr>
</script>
<script type="text/javascript"  charset="utf-8">
  $(function(){
    var dataSrouce = [{
      name: "张三",
      family: [
        "爸爸",
        "妈妈",
        "哥哥"
      ]
    },{
      name: "李四",
      family: [
        "爷爷",
        "奶奶",
        "叔叔"
      ]
    }];

    //几种渲染数据
    // 第一种(直接渲染)
    //var html = $("#testTmpl").render(dataSrouce);
    // 第二种(直接templates指定渲染)
    //var html = $.templates("#testTmpl").render(dataSrouce);
    // 第三种(复制渲染)
    $.templates("personTmpl", "#testTmpl");
    var html = $.render.personTmpl(dataSrouce);

    $("#list").append(html);
  });
</script>
